import {
  observer,
  useFieldSchema,
  useFormEffects,
  useField,
} from '@formily/react';
import React, { FC, useState, useEffect } from 'react';
import { onFieldValueChange } from '@formily/core';
import { Space } from 'antd';

const Computed: FC = observer(() => {
  const field = useField();
  const [price, setPrice] = useState(0);
  const [count, setCount] = useState(0);

  useFormEffects(() => {
    // 监听字段
    onFieldValueChange('price', (field: any) => {
      setPrice(field.value || 0);
    });
    onFieldValueChange('count', (field: any) => {
      setCount(field.value || 0);
    });
  });
  useEffect(() => {
    // 给表单赋值
    field.form.setValues({
      total: count * price,
    });
  }, [count, price]);
  return (
    <Space>
      <p>
        {price} * {count} ={' '}
      </p>
    </Space>
  );
});
export default Computed;
